<!--
 * @Author: your name
 * @Date: 2020-01-13 09:58:27
 * @LastEditTime : 2020-02-16 18:03:57
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /cross-bh5/vuepages/src/pages/memberStoredDataStatistics/memberStoredDataStatistics.vue
 -->
<template>
  <div class="page memberStoredDataStatistics">
    <StoreChoice
      ref="StoreChoice"
      :current="current"
      :multipleChoice="false"
      :allShopIdsFlag="false"
      v-on:listenToStoreSelect="getSelectStoreValue"
      :hasTotal="canSelectAllStore"
      reqUrl="/newapp/shop/getShopSelect.do"
    />
    <mt-datetime-picker
      ref="startPicker"
      type="date"
      :closeOnClickModal="false"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      confirmText="下一步"
      @confirm="endPicker"
      @cancel="cancelPicker"
      :startDate="startPickerStartDate"
      :endDate="new Date()"
    >
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="endPicker"
      type="date"
      :closeOnClickModal="false"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      :startDate="startDateScope"
      :endDate="endDateScope"
      @confirm="endDateChoice"
      @cancel="cancelPicker"
    >
    </mt-datetime-picker>
    <DateChoice ref="DateChoice" v-on:listenToDateChoice="getSelectDateValue" />
    <awesome-picker
      ref="activityClass"
      :textTitle="activityClass.textTitle"
      :data="activityClass.data"
      :anchor="activityClass.anchor"
      @confirm="v => handleConfirm(v, activityClass.data)"
    >
    </awesome-picker>
    <div class="scroll-view" v-if="!loadingFinish">
      <customHeader middleTitle="会员储值" @leftCallBack="handleBack" />
      <introducePage
        v-if="notOrderMemberStored"
        :canOrder="activityManagementFlag"
      ></introducePage>
    </div>
    <div class="noActivity scroll-view" v-if="!hasActivity && loadingFinish">
      <customHeader middleTitle="会员储值" @leftCallBack="handleBack" />
      <div class="page-body">
        <img src="../../assets/images/noActivity.png" />
        <div class="info" v-if="activityManagementFlag">
          <p>您当前还没有在线的储值活动</p>
          <p>快去创建专属您的储值活动吧</p>
        </div>
        <div class="info" v-else>
          <p>您当前还没有在线的储值活动</p>
          <p>如需创建请联系您的老板</p>
        </div>
        <div
          v-if="activityManagementFlag"
          class="btn"
          @click="toActivityCreate"
        >
          创建活动
        </div>
      </div>
    </div>
    <div class="scroll-view" v-if="hasActivity && loadingFinish">
      <customHeader
        middleTitle="会员储值"
        :rightTitle="activityManagementFlag ? '活动管理' : ''"
        @leftCallBack="handleBack"
        @rightCallBack="toMember"
      />
      <div class="page-body">
        <div v-if="showWarning" class="warningBox">
          您当前还没有产生活动数据，优化储值活动或者加强店内推广
        </div>
        <div class="list">
          <div class="listItem">
            <span class="label">门店：</span>
            <div v-if="singleShopFlag" class="val">
              {{ shopName }}
            </div>
            <div
              v-if="!singleShopFlag"
              class="val"
              @click="handleClickSelectStore"
            >
              {{ shopName }}
            </div>
            <i v-if="!singleShopFlag" class="zhk-list_rarrow icon"></i>
          </div>
          <div class="listItem">
            <span class="label">时间：</span>
            <div class="val" @click="startPicker">
              {{
                startDate && endDate
                  ? moment(startDate).format("YYYY-MM-DD") +
                    " 至 " +
                    moment(endDate).format("YYYY-MM-DD")
                  : ""
              }}
            </div>
            <i class="zhk-list_rarrow icon"></i>
          </div>
          <div class="listItem" v-if="shopId.length > 0">
            <span class="label">活动形式：</span>
            <div class="val" @click="handleClickSelectActivity">
              {{ activityClass.selectValue.value }}
            </div>
            <i class="zhk-list_rarrow icon"></i>
          </div>
        </div>
        <div class="list spacing">
          <div class="infoItem">
            <div class="tt">
              储值金额(元)<popupPrompt
                :text="{ tt: '• 储值金额', info: '储值实收+赠送金额' }"
              ></popupPrompt>
            </div>
            <div class="price">
              {{
                processData(
                  summaryModal.couponOrderReportSummaryModel.acountAmount,
                  "¥",
                  true
                )
              }}
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">储值实收(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponOrderReportSummaryModel.rechargeAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">赠送金额(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponOrderReportSummaryModel.additionalAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">
                  储值会员数(人)<popupPrompt
                    :text="{
                      tt: '• 储值会员数',
                      info: '在本店参与过储值的会员数'
                    }"
                  ></popupPrompt>
                </div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponOrderReportSummaryModel.memberCount
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">
                  储值笔数(笔)
                  <a
                    v-if="!this.activityClass.selectValue.key"
                    @click="
                      () => {
                        this.storedValueDetailPopupVisible = true;
                      }
                    "
                    >详情</a
                  ><i
                    class="zhk-list_rarrow icon"
                    v-if="!this.activityClass.selectValue.key"
                    ><mt-popup
                      class="popup-border-radius"
                      v-model="storedValueDetailPopupVisible"
                    >
                      <div class="storedValueDetailPopup">
                        <div class="popTt">
                          近30天平均笔单价<i class="waringText">(截止昨日)</i
                          ><span>{{
                            processData(
                              couponStatisticsDetailModal.univalence,
                              "",
                              true
                            )
                          }}</span
                          >元
                        </div>
                        <div class="info">
                          <div class="infoTT">
                            <div>储值规则</div>
                            <div>储值笔数</div>
                          </div>
                          <div class="infoList">
                            <div
                              class="infoListItem"
                              v-for="(item,
                              index) in couponStatisticsDetailModal.couponOrderReportRuleDetails"
                              :key="index"
                            >
                              <div>{{ item.ruleName }}</div>
                              <div>{{ processData(item.orderCount) }}</div>
                            </div>
                          </div>
                        </div>
                        <span
                          class="zhk-alert_close close"
                          @click="
                            () => {
                              this.storedValueDetailPopupVisible = false;
                            }
                          "
                        ></span>
                      </div> </mt-popup
                  ></i>
                </div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponOrderReportSummaryModel.orderCount
                    )
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="infoItem">
            <div class="tt">
              储值卡消费金额(元)<popupPrompt
                :text="{ tt: '• 储值卡消费金额', info: '不包含已退款金额' }"
              ></popupPrompt>
            </div>
            <div class="price">
              {{
                processData(
                  summaryModal.couponConsumeReportModel.comsumerAmt,
                  "¥",
                  true
                )
              }}
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">
                  储值卡支付金额(元)<popupPrompt
                    :text="{
                      tt: '• 储值卡支付金额',
                      info: '使用储值卡余额支付的金额'
                    }"
                  ></popupPrompt>
                </div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponConsumeReportModel.couponPayAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">
                  储值卡退款金额(元)
                </div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponConsumeReportModel.couponRefundAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">
                  储值卡支付笔数(笔)<popupPrompt
                    :text="{
                      tt: '• 储值卡支付笔数',
                      info:
                        '当通用和单店卡组合支付时，各活动形式下笔数各算一笔，门店/商户维度下只算一笔。即各活动形式下的储值卡支付笔数加和可能大于门店/商户维度查询的支付笔数'
                    }"
                  ></popupPrompt>
                </div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponConsumeReportModel.couponPayCount
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">储值卡退款笔数(笔)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.couponConsumeReportModel.couponRefundCout
                    )
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list spacing">
          <div class="chartTt" style="text-align:center">
            <div class="wordBox" >
              累计数据<span>(截止今日累计)</span
              ><popupPrompt
                v-if="!activityClass.selectValue.key && this.shopId.length == 1"
                iconClass="zhk-list_analyze"
                :text="{
                  tt: '',
                  info:
                    '当存在通用活动时 ，可能出现非本店储值金额在本店核销情况，即储值消费金额高于储值金额。'
                }"
              ></popupPrompt>
              <popupPrompt
                v-if="activityClass.selectValue.key == '1'  && this.shopId.length == 1"
                iconClass="zhk-list_analyze"
                :text="{
                  tt: '',
                  info:
                    '通用活动下，可能出现非本店储值金额在本店核销情况，即储值消费金额高于储值金额。'
                }"
              ></popupPrompt>
            </div>
          </div>
          <div class="infoItem noBorder">
            <div class="itemList">
              <div class="item">
                <div class="itemTt">储值实收金额(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel.rechargeAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">赠送金额(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel
                        .additionalAmt,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">储值消费金额(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel.usedAmount,
                      "",
                      true
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">消费笔数(笔)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel.outPayNums
                    )
                  }}
                </div>
              </div>
            </div>
            <div class="itemList">
              <div class="item">
                <div class="itemTt">储值会员数(人)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel.memberCount
                    )
                  }}
                </div>
              </div>
              <div class="item">
                <div class="itemTt">储值笔数(笔)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel.orderCount
                    )
                  }}
                </div>
              </div>
            </div>
            <div
              class="itemList"
              v-if="
                this.shopId.length == 0 ||
                  this.activityClass.selectValue.key == '0'
              "
            >
              <div class="item">
                <div class="itemTt">剩余储值金额(元)</div>
                <div class="itemPrice">
                  {{
                    processData(
                      summaryModal.appCouponOrderReportSummaryModel
                        .balanceAmount
                    )
                  }}
                </div>
              </div>
              <div class="item"></div>
            </div>
          </div>
          <div
            class="warnModuleBox"
            v-if="!showWarning && activityManagementFlag"
          >
            <div class="warnModule">
              <div class="info">
                目前可支持12档储值规则同时在线，立刻前往管理活动。
              </div>
              <div class="btn" @click="toMember">活动管理</div>
            </div>
          </div>
        </div>
        <div class="list spacing">
          <div class="chartTt">储值和实充金额趋势<span>截止昨日</span></div>
          <div class="tabBarBox">
            <div class="tabBar">
              <div
                v-for="(item, index) in chat1TabBar"
                :key="index"
                :class="`tabBarItem ${item.checked ? 'checked' : ''}`"
                @click="tab1BarClick(chat1TabBar, item)"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="chartBox">
            <ve-line
              height="100%"
              :data="chart1Data"
              :settings="chart1Settings"
              :extend="chart1extend"
            ></ve-line>
          </div>
          <div class="chartInfo">
            该数据默认为截止昨日数据，不随已选时间变化
          </div>
        </div>
        <div class="list spacing">
          <div class="chartTt">余额消费金额趋势<span>截止昨日</span></div>
          <div class="tabBarBox">
            <div class="tabBar">
              <div
                v-for="(item, index) in chat2TabBar"
                :key="index"
                :class="`tabBarItem ${item.checked ? 'checked' : ''}`"
                @click="tab2BarClick(chat2TabBar, item)"
              >
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="chartBox">
            <ve-line
              height="100%"
              :data="chart2Data"
              :settings="chart2Settings"
              :extend="chart2extend"
            ></ve-line>
          </div>
          <div class="chartInfo">
            该数据默认为截止昨日数据，不随已选时间变化
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import DateChoice from "../../components/DateChoice/DateChoice";
import popupPrompt from "./popupPrompt";
import { Toast } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import tools from "../../tools/tools.js";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import introducePage from "./introducePage";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);
import jsAuthority from "../../tools/jsAuthority.js";
import moment from "moment";
export default {
  name: "memberStoredDataStatistics",
  data() {
    return {
      tools: tools,
      moment: moment,
      current: [],
      shopId: [],
      shopName: "",
      showWarning: false,
      singleShopFlag: false,
      notOrderMemberStored: false,
      activityManagementFlag: false,
      canSelectAllStore: true,
      startPickerStartDate: new Date("2019/12/23"),
      startDate: new Date(),
      endDate: new Date(),
      oldStartDate: "",
      oldEndDate: "",
      startDateScope: new Date(),
      endDateScope: new Date(),
      loadingFinish: false,
      hasActivity: false,
      isOpen: false,
      storedValueDetailPopupVisible: false,
      summaryModal: {
        couponOrderReportSummaryModel: {},
        couponConsumeReportModel: {},
        appCouponOrderReportSummaryModel: {}
      }, //汇总数据
      couponStatisticsDetailModal: {}, //累计数据查询
      //活动类型
      activityClass: {
        tip: "请选择",
        anchor: [0],
        textTitle: "活动类型",
        selectValue: { key: "", value: "不限" },
        data: [
          { key: "", value: "不限" },
          { key: "0", value: "单门店活动" },
          { key: "1", value: "通用活动" }
        ]
      },
      chat1TabBar: [
        { label: "近7天", value: "7", checked: true },
        { label: "近30天", value: "30", checked: false }
      ],
      chart1Settings: {
        type: "line",
        offsetY: "50%",
        labelMap: {
          realRechargeAmt: "实充金额",
          rechargeAmt: "储值金额"
        }
      },
      chart1extend: {
        color: ["#51d9af", "#e5e79f"],
        legend: {
          x: "center", //可设定图例在左、右、居中
          y: "bottom" //可设定图例在上、下、居中
        }
      },
      chart1Data: {
        columns: ["dataDate", "realRechargeAmt", "rechargeAmt"],
        rows: []
      },
      chat2TabBar: [
        { label: "近7天", value: "7", checked: true },
        { label: "近30天", value: "30", checked: false }
      ],
      chart2Settings: {
        type: "line",
        offsetY: "50%",
        yAxisType: ["normal"],
        digit: 3,
        labelMap: {
          comsumerAmt: "余额消费金额"
        }
      },
      chart2extend: {
        color: ["#51d9af", "#e5e79f"],
        legend: {
          x: "center", //可设定图例在左、右、居中
          y: "bottom" //可设定图例在上、下、居中
        }
      },
      chart2Data: {
        columns: ["dataDate", "comsumerAmt"],
        rows: []
      }
    };
  },
  methods: {
    //查询开通状态
    async getStatus() {
      const url = "/app/setting/queryFunctionState.do";
      return await this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            let v = false;
            if (res.resultObject && res.resultObject.length > 0) {
              for (const item of res.resultObject) {
                if (
                  item["fmId"] == "MARKETING_SERVICE" &&
                  item["fmStatus"] == 1
                ) {
                  v = true;
                }
              }
            }
            this.isOpen = v;
            if (!v) {
              this.notOrderMemberStored = true;
            }
            return v;
          } else {
            MessageBox.alert("查询开通状态异常！").then(action => {
              jsBridge.closeWindow();
            });
          }
        })
        .catch(err => {

        });
    },
    //查询是否创建过活动
    async hasActivityCreated() {
      await this.ajax({
        url: "/newapp/deposit/hasActivityCreated.do",
        type: "get",
        data: {},
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            this.loadingFinish = true;
            const data = res.resultObject;
            if (data) {
              CommonUtil.getUserInfo().then(userInfo => {
                let role = userInfo.role;
                if (role == 1) {
                  this.$refs.StoreChoice.popupHide();
                } else if (role == 7) {
                  this.canSelectAllStore = false;
                  this.$refs.StoreChoice.popupShow();
                } else {
                  this.shopName = userInfo.shopName;
                  this.shopId.push(userInfo.yzShopId);
                  this.singleShopFlag = true;
                  this.getCouponStatistics().then(() => {
                    this.getCouponStatisticsDetail().then(() => {
                      this.queryCouponRechargeTrendReport().then(() => {
                        this.queryCouponConsumeTrendReport();
                      });
                    });
                  });
                }
              });
            }
            this.hasActivity = data;
          } else {
            MessageBox.alert("查询创建活动状态异常！").then(action => {
              jsBridge.closeWindow();
            });
          }
        })
        .catch(function(err) {
   
        });
    },
    //汇总数据查询
    async getCouponStatistics() {
      debugger;
      const params = {
        shopIds: this.shopId,
        startTime: moment(this.startDate)
          .startOf("day")
          .valueOf(),
        endTime: moment(this.endDate)
          .endOf("day")
          .valueOf(),
        activityType: this.activityClass.selectValue.key
      };
      await this.ajax({
        url: "/newapp/deposit/getCouponStatistics.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            if (!data.couponhadStatistics) {
              this.showWarning = true;
              return;
            }
            this.summaryModal.couponOrderReportSummaryModel =
              data.couponOrderReportSummaryModel || {};
            this.summaryModal.couponConsumeReportModel =
              data.couponConsumeReportModel || {};
            this.summaryModal.appCouponOrderReportSummaryModel =
              data.appCouponOrderReportSummaryModel || {};
          }
        })
        .catch(function(err) {

        });
    },
    //累计数据查询
    async getCouponStatisticsDetail() {
      debugger;
      const params = {
        shopIds: this.shopId,
        startTime: moment(this.startDate)
          .startOf("day")
          .valueOf(),
        endTime: moment(this.endDate)
          .endOf("day")
          .valueOf(),
        activityType: this.activityClass.selectValue.key
      };
      await this.ajax({
        url: "/newapp/deposit/getCouponStatisticsDetail.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            this.couponStatisticsDetailModal = data;
          }
        })
        .catch(function(err) {

        });
    },
    //储值和实充金额趋势数据查询
    async queryCouponRechargeTrendReport() {
      debugger;
      const chat1TabBar = this.chat1TabBar;
      let poorVal = "";
      chat1TabBar.map(item => {
        if (item.checked) {
          poorVal = Number(item.value);
        }
      });
      const params = {
        shopIds: this.shopId,
        startTime: moment()
          .startOf("day")
          .subtract(poorVal, "days")
          .valueOf(),
        endTime: moment()
          .subtract(1, "days")
          .endOf("day")
          .valueOf(),
        activityType: this.activityClass.selectValue.key
      };
      await this.ajax({
        url: "/newapp/deposit/queryCouponRechargeTrendReport.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            data.map(item => {
              item.dataDate = item.dataDate.substring(
                4,
                item.dataDate.length + 1
              );
              item.dataDate =
                item.dataDate.slice(0, 2) + "." + item.dataDate.slice(2, 4);
            });
            this.chart1Data.rows = data;
          } else {
            this.chart1Data.rows = [];
          }
        })
        .catch(function(err) {

        });
    },
    //余额消费金额趋势查询
    async queryCouponConsumeTrendReport() {
      debugger;
      const chat2TabBar = this.chat2TabBar;
      let poorVal = "";
      chat2TabBar.map(item => {
        if (item.checked) {
          poorVal = Number(item.value);
        }
      });
      const params = {
        shopIds: this.shopId,
        startTime: moment()
          .startOf("day")
          .subtract(poorVal, "days")
          .valueOf(),
        endTime: moment()
          .subtract(1, "days")
          .endOf("day")
          .valueOf(),
        activityType: this.activityClass.selectValue.key
      };
      await this.ajax({
        url: "/newapp/deposit/queryCouponConsumeTrendReport.do",
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            data.map(item => {
              item.dataDate = item.dataDate.substring(
                4,
                item.dataDate.length + 1
              );
              item.dataDate =
                item.dataDate.slice(0, 2) + "." + item.dataDate.slice(2, 4);
            });
            this.chart2Data.rows = data;
          } else {
            this.chart2Data.rows = [];
          }
        })
        .catch(function(err) {

        });
    },
    getIdToIndex(data, indexArr) {
      const lev = indexArr.length;
      let n = 0;
      let res = [];
      const getData = datas => {
        n = n + 1;
        if (n == lev) {
          res.push(datas[indexArr[n - 1].index]);
        } else {
          res.push(datas[indexArr[n - 1].index]);
          getData(datas[indexArr[n - 1].index].children);
        }
      };
      getData(data);
      return res;
    },
    processData(val, unit, priceFlag) {
      if (!isNaN(val) && val !== null) {
        if (val == "0" && priceFlag) {
          return unit ? unit + " " + "0.00" : "0.00";
        }
        if (priceFlag) {
          return unit ? unit + " " + val.toFixed(2) : val.toFixed(2);
        }
        return unit ? unit + " " + val : val;
      } else {
        if (priceFlag) {
          return "0.00";
        } else {
          return "0";
        }
      }
    },
    tab1BarClick(data, val) {
      data.map(item => {
        if (item.value == val.value) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
      this.queryCouponRechargeTrendReport();
    },
    tab2BarClick(data, val) {
      data.map(item => {
        if (item.value == val.value) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
      this.queryCouponConsumeTrendReport();
    },
    handleBack() {
      jsBridge.closeWindow();
    },
    toMember() {
      this.$router.push({ path: "/pettySavings" });
    },
    toActivityCreate() {
      this.$router.push({ path: "/pettySavings/add" });
    },
    //选择活动
    handleClickSelectActivity() {
      this.$refs.activityClass.show();
    },
    handleConfirm(v, data) {
      const selectValue = this.getIdToIndex(data, v);
      this.activityClass.selectValue = selectValue[0];
      this.getCouponStatistics().then(() => {
        this.getCouponStatisticsDetail().then(() => {
          this.queryCouponRechargeTrendReport().then(() => {
            this.queryCouponConsumeTrendReport();
          });
        });
      });
    },
    getSelectStoreValue(value) {
      this.shopId = [];
      if (value && value.length > 0) {
        if (value[0].selectKey === "all") {
          this.shopId = [];
          this.shopName = value[0].selectName;
        } else if (value.length == 1) {
          this.shopId.push(value[0].selectKey);
          this.shopName = value[0].selectName;
        } else {
          value.map(item => {
            this.shopId.push(item.selectKey);
          });
          this.shopName = value.length + "家门店";
        }
      }
      if (this.shopId.length == 0) {
        this.activityClass.selectValue = { key: "", value: "不限" };
      }
      this.getCouponStatistics().then(() => {
        this.getCouponStatisticsDetail().then(() => {
          this.queryCouponRechargeTrendReport().then(() => {
            this.queryCouponConsumeTrendReport();
          });
        });
      });
    },
    handleClickSelectStore() {
      this.$refs.StoreChoice.popupShow();
    },
    getSelectDateValue(value, dateLabel, index) {
      this.dateLabel =
        moment(value.startDate).format("YYYY-MM-DD") +
        " 至 " +
        moment(value.endDate).format("YYYY-MM-DD");
      this.startDate = value.startDate.getTime();
      this.endDate = value.endDate.getTime();
    },

    startPicker() {
      this.oldStartDate = this.startDate;
      this.oldEndDate = this.endDate;
      this.$refs.startPicker.open();
    },
    endPicker(e) {
      let iToDay = e.getDate();
      let iToMon = e.getMonth();
      let iToYear = e.getFullYear();
      let newDay = new Date(iToYear, iToMon, iToDay + 30);
      this.startDateScope = e;
      if (newDay > new Date()) {
        this.endDateScope = new Date();
      } else {
        this.endDateScope = newDay;
      }
      this.startDate = e;
      this.$refs.endPicker.open();
    },
    endDateChoice(e) {
      this.endDate = e;
      this.getCouponStatistics().then(() => {
        this.getCouponStatisticsDetail();
      });
    },
    cancelPicker() {
      this.startDate = this.oldStartDate;
      this.endDate = this.oldEndDate;
    }
  },
  mounted() {
    jsAuthority.checkedSuccess(() => {
      this.activityManagementFlag = jsAuthority.checked(
        "app.home.ministore.activity"
      );
    });
    this.getStatus().then(res => {
      if (res) {
        this.hasActivityCreated();
      }
    });
  },
  components: {
    customHeader,
    StoreChoice,
    DateChoice,
    popupPrompt,
    introducePage
  }
};
</script>
<style lang="scss" scoped>
@import "memberStoredDataStatistics";
</style>
<style lang="scss">
@import "../../style/public";
.popup-border-radius {
  @include remCalc(border-radius, 12);
}
.storedValueDetailPopup {
  @include remCalc(width, 640);

  @include remCalc(border-radius, 12);
  background: #ffffff;
  @include remCalc(padding, 60, 0);
  text-align: center;
  position: relative;
  .popTt {
    font-family: PingFangSC-Medium;
    @include remCalc(font-size, 32);
    @include remCalc(margin-bottom, 40);
    color: #333333;
    line-height: 1;
    .waringText {
      font-style: normal;
      @include remCalc(font-size, 16);
    }
    span {
      @include remCalc(margin-left, 40);
    }
  }
  .info {
    font-family: PingFangSC-Regular;
    @include remCalc(line-height, 80);
    .infoTT {
      display: flex;
      div {
        color: #333333;
        flex: 1;
        @include remCalc(font-size, 28);
      }
    }
    .infoList {
      @include remCalc(max-height, 400);
      overflow: auto;
    }
    .infoListItem {
      display: flex;
      div {
        color: #666666;
        flex: 1;
        text-align: center;
        @include remCalc(font-size, 24);
      }
    }
  }
  .close {
    position: absolute;
    @include remCalc(top, 0);
    @include remCalc(right, 0);
    @include remCalc(padding, 20);
    @include remCalc(font-size, 20);
  }
}
</style>
